<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" href="./css/jiazai.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style type="text/css">
    	#com-tit{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 100;
			padding: 20px 20px 10px;
			background: #1e618a;
			color: white;
		}
		
		#com-tit>div:nth-of-type(1){
			flex: 0 0 80px;
			height: 30px;
			width: 100%;
		}
		.menu{
			width: 50px;
			height: 100%;
		}
		#com-tit>div:nth-of-type(2){
			flex: 1 1 0;
			font-size: 18px;
			text-align: center;
			color: white;
			width: 100%;
			
		}
		#com-tit>div:nth-of-type(3){
			flex: 0 0 80px;
			width: 100%;
			font-size: 14px;
			text-align: right;
		}
		#content-wrap{
			margin-top: 140px;
		}
		#content-wrap>h1{
			padding-top: 10px;
			font-size: 25px;
			text-align: center;
			letter-spacing: 1px;
			color: #06476D;
		}
		#content-wrap>p:first-of-type{
			padding-top: 15px;
			font-size: 16px;
			text-align: center;
			color: #1D618A;
		}
		.update-btn,.new-al-update{
			width: 70%;
			margin:60px auto;
			padding: 15px 0;
			font-size: 16px;
			text-align: center;
			border-radius: 6px;
		}
		.update-btn{
			color: white;
			background: #1D618A;

		}
		.new-al-update{
			border: 1px solid #1D618A;
			color: #1D618A;
		}
		
		/*更新弹窗*/
		#mask,.update-wrap{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
		}
		#mask{
			z-index: 600;
			background: rgba(0,0,0,.5);
		}
		.update-wrap{
			z-index: 650;
			background: transparent;
		}
		.update-content{
			width: 86%;
			/*height: 200px;*/
			background: white;
			border-radius: 10px;
		}
		.update-content>p{
			padding: 3px 0;
			text-align: center;
		}
		.update-logo>img{
			width: 170px;
			height: auto;
			margin-top: -70px;
			/*transform: translateY(-70px);*/
		}
		.update-btn-wrap>span{
			flex: 1 1 0;
			padding: 18px 0;
			text-align: center;
			color: #86848F;
			border-top: 1px solid #eee;
		}
		.update-btn-wrap>span:last-of-type{
			color: #1D618A;
			border-left: 1px solid #eee;
		}
		/*更新弹窗*/
	
    </style>
    <title>版本更新</title>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->
        
        <div id="mask" v-if='offUpdate'></div>
        <transition enter-active-class="animated fadeIn">
        <div class="update-wrap dis-cen" v-if='offUpdate'>
        	<div class="update-content">
        		<div class="dis-cen update-logo">
        			<img src="img/update-logo.png"/>
        		</div>
        		<p>版本更新啦！优化使用体验更人性化！</p>
        		<p>立即更新</p>
        		<div class="dis-spa update-btn-wrap">
        			<span @tap="offUpdate=false;">忽略</span>
        			<span @tap="install(havaUpdate.updateInfo)">升级</span>
        		</div>
        	</div>
        </div>
        </transition>
        <div id="com-tit" class='dis-spa'>
        	<div class='cont'>
        		<p class='menu dis-start' @tap="_close();">
	        		<img src="img/back-white.svg" style="width: 22px;height: 22px;" />
        		</p>
        	</div>
        	<div>版本更新</div>
        	<div class='cont' style="opacity: 0;">1</div>
        </div>
        
        <div id="content-wrap">
        	<div class="dis-cen">
        		<img src="img/edition-logo.png" style="width: 90px;height: auto;"/>
        	</div>
        	<h1>AI矿池</h1>
        	<p>当前版本&nbsp;&nbsp;<span>1.01</span></p>
        	<p class='update-btn' v-if='havaUpdate' @tap='offUpdate=true;'>更新版本</p>
        	<p class='new-al-update' v-else>最新版本</p>
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/update.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var app = new Vue({
            el: '#app',
            data: {
                //加载动画
                jiazai: false,
                //升级弹窗
                offUpdate:false,
        		//false:无更新  true:有更新
                havaUpdate:false
            },
        });
        mui.plusReady(function(){
        	plus.runtime.getProperty(plus.runtime.appid, function(info) {
		    	HTTP.post(UPDATAURL,{ver:info.version},function(item){
					if (String(item.status) == '1') {
						app.$data.havaUpdate=item;
					}
				});
		    });
        });
    </script>
</body>

</html>